<template>
	<view class="uploadList">
		<view class="img" v-for="(src,i) in imgList" :key="i" @click="ViewImage(src)">
			<image :src="src" mode="aspectFill"></image>
			<text class="iconfont icon-cuo" @click.stop="delImg(i)"></text>
		</view>
		<text class="iconfont icon-xiangji" @click="uploadFn"></text>
	</view>
</template>

<script>
	export default {
		name: 'yl-upload',
		props: {
			type: {
				type: Number,
				default: 1,
			},

		},
		data() {
			return {
				imgList: []
			}
		},
		methods: {
			//删除图片
			delImg(i) {
				this.imgList.splice(i, 1)
			},
			//预览图片
			ViewImage(src) {
				uni.previewImage({
					urls: this.imgList,
					current: src
				});
			},
			uploadFn() {
				uni.chooseImage({
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						console.log(JSON.stringify(res.tempFilePaths));
						res.tempFilePaths.forEach((src) => {
							this.imgList.push(src)
						})
					}
				});
			}
		},
	}
</script>

<style lang="less">
	.uploadList {
		display: flex;
		flex-wrap: wrap;

		.img {
			width: 120upx;
			height: 120upx;
			margin-right: 20upx;
			margin-bottom: 20upx;
			position: relative;

			image {
				width: 100%;
				height: 100%;
			}

			>.iconfont {
				top: 0;
				right: 0;
				font-size: 24upx;
				color: #fff;
				padding: 4upx 8upx;
				background: rgba(0, 0, 0, .5);
				position: absolute;
			}
		}

		.img:nth-child(4n) {
			margin-right: 0;
		}

		>.iconfont {
			padding: 25upx 0;
			font-size: 70upx;
			color: #1b8cd2;
		}
	}
</style>
